<template>
  <div>
    <a-card>
      <case-search-header
        :pageSize="pageSize"
        :caseType="caseTypeList"
        :caseStatus="caseStatusList"
        @search="searchByCriteria"
        @reset="resetCriteria"
      ></case-search-header>
      <div class="operation-button">
        <a-button type="primary" icon="plus" @click="caseCreateModal = true">新增case</a-button>
        <a-button type="primary" icon="cloud" :disabled="selectedRowKeys.length == 0" @click="exportCase"
          >导出case</a-button
        >
        <a-button type="primary" @click="exportESB" :disabled="selectedRowKeys.length == 0">ESB接口导出</a-button>
        <a-button
          type="primary"
          icon="safety-certificate"
          @click="allocateCaseModal = true"
          :disabled="selectedRowKeys.length == 0"
          >分配</a-button
        >
      </div>
      <!-- 主体表格内容 -->
      <a-table :columns="columns" :data-source="data" :pagination="false" :row-selection="rowSelection">
        <a slot="caseNo" slot-scope="text, record" @click="showCase(record)">{{ text }}</a>
        <template slot="operation" slot-scope="record">
          <div class="operation-button">
            <a-button type="primary" @click="editCase(record)">修改</a-button>
            <a-button type="primary" @click="auditCase(record)">审核</a-button>
            <a-button type="danger" @click="delCase(record)">删除</a-button>
            <a-upload
              class="upload-demo"
              :data="record"
              :before-upload="checkUpload"
              :customRequest="uploadESB"
              :multiple="false"
              :showUploadList="false"
            >
              <a-button type="primary" icon="upload">ESB接口导入</a-button>
            </a-upload>
            <a-button type="primary" @click="handelWSDL(record)">WSDL2Java</a-button>
          </div>
        </template>
      </a-table>
      <!-- 分页组件 -->
      <a-pagination
        v-model="currentpage"
        :show-total="(total, range) => `第${range[0]}-${range[1]}条 , 共计${total} 条记录`"
        :total="total"
        :pageSize="pageSize"
        @change="pageChange"
      />
      <!-- case新增模块组件 -->
      <case-create-modal
        :showModal="caseCreateModal"
        :caseType="caseTypeList"
        @ok="onok"
        @cancel="cancel"
      ></case-create-modal>
      <!-- case信息展示模块组件 -->
      <case-info-modal
        :showModal="caseInfoModal"
        :selectCaseInfo="selectCaseInfo"
        :caseStatus="caseStatusList"
        @close="closeInfoModal"
      ></case-info-modal>
      <!-- case修改组件modal -->
      <case-edit-modal
        :showModal="caseEditModal"
        :selectCaseInfo="selectCaseInfo"
        @ok="handleEdit"
        @close="closeEditModal"
      ></case-edit-modal>
      <!-- WSDL modal -->
      <wsdl-modal :showModal="wsdlModal" :trans="selectTransList" @close="closeWSDLModal"></wsdl-modal>
    </a-card>
    <!-- 分配开发人员的modal -->
    <a-modal v-model="allocateCaseModal" title="分配开发人员" @ok="allocateCase" @cancel="closeAllocateCaseModal">
      <a-card :bordered="false" style="width: 100%">
        <a-form-model ref="developPrincipalForm" :rules="developPrincipalRules" :model="developPrincipal">
          <a-row :gutter="24">
            <a-col :span="24">
              <a-form-model-item
                label="请选择开发人员"
                prop="principal"
                :label-col="{ span: 8 }"
                :wrapper-col="{ span: 12 }"
              >
                <a-select placeholder="--请选择--" v-model="developPrincipal.principal">
                  <a-select-option v-for="developPrincipal in developPrincipalList" :key="developPrincipal">{{
                    developPrincipal
                  }}</a-select-option>
                </a-select>
              </a-form-model-item>
            </a-col></a-row
          >
        </a-form-model>
      </a-card>
    </a-modal>
  </div>
</template>

<script>
import { getCaseTypeList } from '@/api/pf_bank/case/caseType'
import { getCaseStatusList } from '@/api/pf_bank/case/caseStatus'
import CaseSearchHeader from './modules/CaseSearchHeader.vue'
import CaseCreateModal from './modules/CaseCreateModal.vue'
import WsdlModal from './modules/WSDLModal.vue'
import {
  getCaseList,
  showCaseInfo,
  editCase,
  exportCase,
  auditCase,
  returnCase,
  delCase,
  allocateCase
} from '@/api/pf_bank/case/case'
import { exportESB, uploadESB } from '@/api/pf_bank/esb/esb'
import { downloadFile, getDevelopPrincipalList } from '@api/pf_bank/common/common'
import { showTransByCaseId } from '@api/pf_bank/trans/trans'
import CaseInfoModal from './modules/CaseInfoModal.vue'
import CaseEditModal from './modules/CaseEditModal.vue'
export default {
  components: {
    CaseSearchHeader,
    CaseCreateModal,
    CaseInfoModal,
    CaseEditModal,
    WsdlModal
  },
  data() {
    return {
      developPrincipalList: [],
      developPrincipal: {},
      allocateCaseModal: false,
      selectTransList: [],
      wsdlModal: false,
      selectedRowKeys: [],
      selectCaseInfo: {},
      caseStatusList: [],
      caseTypeList: [],
      caseEditModal: false,
      caseCreateModal: false,
      caseInfoModal: false,
      total: 0,
      currentpage: 1,
      pageSize: 10,
      data: [],
      columns: [
        { title: 'case编号', dataIndex: 'caseNo', key: 'caseNo', scopedSlots: { customRender: 'caseNo' } },
        { title: 'case概要', dataIndex: 'caseInfo', key: 'caseInfo' },
        { title: 'case类型', dataIndex: 'caseType', key: 'caseType' },
        { title: '项目组', dataIndex: 'caseDepart', key: 'caseDepart' },
        { title: 'case状态', dataIndex: 'caseStatus', key: 'caseStatus' },
        { title: '投产日', dataIndex: 'operationDate', key: 'operationDate' },
        { title: '申请人', dataIndex: 'createBy', key: 'createBy' },
        { title: '申请时间', dataIndex: 'createTime', key: 'createTime' },
        { title: '开发责任人', dataIndex: 'developPrincipal', key: 'developPrincipal' },
        { title: '操作', scopedSlots: { customRender: 'operation' } }
      ],
      developPrincipalRules: {
        principal: [{ required: true, message: '请选择一个开发人员', trigger: 'blur' }]
      }
    }
  },
  created() {
    this.getCaseTypeList()
    this.getCaseList()
    this.getCaseStatusList()
    this.getdevelopPrincipalList()
  },

  computed: {
    //将选择框的值与caseId绑定
    rowSelection() {
      return {
        onChange: (selectedRowKeys, selectedRows) => {
          this.selectedRowKeys = selectedRows.map(item => {
            return { id: item.id, caseNo: item.caseNo }
          })
        }
      }
    }
  },

  methods: {
    //子组件的搜索方法
    searchByCriteria(val) {
      this.data = val.data
      this.total = val.total
    },

    //子组件重置搜索框的方法
    resetCriteria(val) {
      this.data = val.data
      this.total = val.total
    },

    //换页数
    pageChange(val) {
      getCaseList(val, this.pageSize, null).then(res => {
        this.data = res.result.data
        this.total = res.result.total
      })
    },

    cancel(data) {
      this.caseCreateModal = data
    },

    onok(data) {
      //子组件新建case完毕后重新刷新列表
      this.caseCreateModal = data
      this.getCaseList()
    },

    //获取case类型
    getCaseTypeList() {
      getCaseTypeList().then(res => {
        this.caseTypeList = res.result
      })
    },

    //获取case状态列表
    getCaseStatusList() {
      getCaseStatusList().then(res => {
        this.caseStatusList = res.result
      })
    },

    //获取case数据
    getCaseList() {
      getCaseList(this.currentpage, this.pageSize, null).then(res => {
        //从此处理下case状态数据
        this.data = res.result.data
        this.total = res.result.total
      })
    },

    //点击caseNo展示的case信息
    showCase(record) {
      showCaseInfo(record.id).then(res => {
        if (res.code == 200) {
          this.selectCaseInfo = res.result
          this.caseInfoModal = true
        } else {
          this.$message.error(res.message)
        }
      })
    },

    //修改Case
    editCase(record) {
      showCaseInfo(record.id).then(res => {
        //修改日期格式
        this.selectCaseInfo = res.result
        this.caseEditModal = true
      })
    },

    //点击审核Case按钮
    auditCase(record) {
      this.$confirm({
        title: '如何操作以下case?',
        okText: '审核',
        cancelText: '退回',
        onOk: () => {
          auditCase(record.id).then(res => {
            if (res.code == 200) {
              this.$message.success('审核成功')
            }
          })
        },
        onCancel: () => {
          returnCase(record.id).then(res => {
            if (res.code == 200) {
              this.$message.success('退回成功')
            }
          })
        }
      })
    },

    //点击删除的按钮
    delCase(record) {
      this.$confirm({
        title: '确定要删除该case?',
        okText: '删除',
        okType: 'danger',
        cancelText: '取消',
        onOk: () => {
          delCase(record.id).then(res => {
            if (res.code == 200) {
              this.$message.success('删除成功')
            }
          })
        }
      })
    },

    //关闭CaseInfoModal的方法
    closeInfoModal(data) {
      this.caseInfoModal = data
    },

    //子组件关闭CaseEditModal的方法
    closeEditModal(data) {
      //关闭模态窗口
      this.caseEditModal = data
    },

    //修改case的方法，data为修改时提交的整个body参数
    handleEdit(data) {
      editCase(data).then(res => {
        if (res.code == 200) {
          this.$message.success('修改成功')
          //刷新当前页
          this.getCaseList()
        }
      })
      this.caseEditModal = false
    },

    //批量下载导出case的方法
    exportCase() {
      let selectedRowKeys = this.selectedRowKeys
      selectedRowKeys.map(item => {
        exportCase(item.caseNo).then(res => {
          let blob = new Blob([res], {
            type: 'application/vnd.ms-excel' //将会被放入到blob中的数组内容的MIME类型
          })
          let objectUrl = URL.createObjectURL(blob) //生成一个url
          let a = document.createElement('a')
          a.href = objectUrl
          a.download = item.caseNo + '.xlsx'
          a.click()
          window.URL.revokeObjectURL(objectUrl)
        })
      })
    },

    //点击WSDL按钮后
    handelWSDL(record) {
      showTransByCaseId(record.id).then(res => {
        this.selectTransList = res.result
        this.wsdlModal = true
      })
    },

    //关闭wsdlmodal的方法
    closeWSDLModal(data) {
      this.wsdlModal = data
    },

    //ESB导出
    exportESB() {
      let hide = this.$message.loading('正在导出文件...')
      exportESB(this.selectedRowKeys).then(res => {
        if (res.code == 200) {
          //此处转换参数
          let fileName = res.result.split('/')[res.result.split('/').length - 1]
          downloadFile(res.result).then(response => {
            hide()
            let blob = new Blob([response], {
              type: 'application/vnd.ms-excel' //将会被放入到blob中的数组内容的MIME类型
            })
            let objectUrl = URL.createObjectURL(blob) //生成一个url
            let a = document.createElement('a')
            a.href = objectUrl
            a.download = fileName + '.xlsx'
            a.click()
            window.URL.revokeObjectURL(objectUrl)
          })
        } else {
          hide()
          this.$message.error(res.message)
        }
      })
    },

    //导入ESB接口前的文件检查
    checkUpload(file) {
      let fileName = file.name.substring(file.name.lastIndexOf('.') + 1)
      let isXlsxOrXls = fileName === 'xlsx' || fileName === 'xls'
      if (!isXlsxOrXls) {
        this.$message.error('只允许上传xlsx或xls类型文件')
      } else {
      }
      return isXlsxOrXls
    },

    //ESB导入
    uploadESB(info) {
      let hide = this.$message.loading('上传ESB接口文件中...')
      let formData = new FormData()
      formData.append('file', info.file)
      formData.append('id', info.data.id)
      uploadESB(formData).then(res => {
        hide()
        if (res.code == 200) {
          this.$message.success(res.result)
        } else {
          this.$message.error(res.message)
        }
      })
    },

    //获取平台开发人员列表
    getdevelopPrincipalList() {
      getDevelopPrincipalList().then(res => {
        this.developPrincipalList = res.result
      })
    },

    //分配Case的功能
    allocateCase() {
      this.$refs.developPrincipalForm.validate(valid => {
        if (valid) {
          this.selectedRowKeys.map(item => {
            allocateCase(this.developPrincipal.principal, item.id).then(res => {
              if (res.code == 200) {
                this.$message.success('case分配成功!')
                this.developPrincipal = {}
                this.allocateCaseModal = false
              }
            })
          })
        } else {
          return false
        }
      })
    },

    //关闭Case分配的Modal
    closeAllocateCaseModal() {
      this.developPrincipal = {}
      this.allocateCaseModal = false
    }
  }
}
</script>

<style scoped lang="less">
@import '~@assets/less/common.less';
.ant-table-thead > tr > th {
  text-align: center;
}
.ant-table-tbody > tr > td {
  text-align: center;
}
.ant-table-wrapper {
  margin-top: 20px;
}
.ant-pagination {
  margin-top: 20px;
  float: right;
}
.operation-button {
  margin-top: 20px;
}
.operation-button > button {
  margin-right: 15px;
}
.upload-demo {
  display: inline-block;
  margin-right: 15px;
}
</style>
